import React, { useState } from 'react';
import { connect } from 'umi';
import { Form, Spin } from 'antd';

import '../common/styles.less';
import { ManageAPI } from '../common/type';
import { ManageServices } from '../services';
import { PurchaseApplyStatisticsContext } from '../common';
import { StatisticsManageViewTop } from './StatisticsManageViewTop';
import { StatisticsManageViewCenter } from './StatisticsManageViewCenter';
import { StatisticsManageViewBottom } from './StatisticsManageViewBottom';

const ManageView: React.FC<ManageAPI.IManageView> = ({ curRes }) => {
  /**
   * 样式根目录
   * */
  const styleFixCls = 'purchase-applystatics-';

  /**
   * 管理页services
   * */
  const { searchList, reloadRequest, pagination, loading } = ManageServices(curRes);

  /**
   * 搜索表单Ref
   * */
  const [applySearchForm] = Form.useForm();

  /**
   * 统计步长
   * */
  const [countStepType, setCountStepType] = useState<string>('月');

  return (
    <>
      <PurchaseApplyStatisticsContext.Provider
        value={{
          styleFixCls,
          countStepType,
          changeStepType: setCountStepType,
        }}
      >
        <Spin spinning={false}>
          <div className={styleFixCls + 'rootBoxDiv'}>
            <StatisticsManageViewTop searchForm={applySearchForm} />
            <StatisticsManageViewCenter />
            <StatisticsManageViewBottom />
          </div>
        </Spin>
      </PurchaseApplyStatisticsContext.Provider>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(ManageView);
